<template>
  <ul class="gz" v-if="show">
    <div>
      <div>规则说明</div>
      <li>1、系统随机生成一个1到50之间的整数作为目标数字,</li>
      <li>2、玩家需要输入一个数字进行猜测,如果猜错了,系统会提示“猜大了”或“猜小了</li>
      <li>3、每次猜测后,系统会根据玩家的猜测给出提示，帮助玩家调整方向</li>
      <li>4、玩家在规定次数内(通常为5-6次)猜中目标数字即获胜</li>
      <li>5、如果玩家在规定次数内未能猜中,游戏结束并显示提示信息</li>
      <button @click="show = false">确认</button>
    </div>

  </ul>
  <div class="game-container">
    <h1>猜数字游戏</h1>
    <h3 style="color: #ccc;">请输入一个1-50之间的整数:</h3>
    <input type="number" v-model="guess" placeholder="请输入数字" />
    <!-- <button>开始</button> -->
    <button @click="submitGuess">提交</button>
    <p class="jg"> <span>{{ message }}</span>&ensp;&ensp;结果</p>
    <p class="caishu">您当前还可以猜的次数 ↓<br><span>{{ attemptsLeft }}</span></p>
    <button class="dw" @click="resetGame" v-if="attemptsLeft === 0 || message === '猜对了！'">重新开始</button>
    <button @click="show = true" class="zhong">?</button>
  </div>
  <!-- <div></div> -->
</template>

<script setup>

import { ref } from 'vue';
let show = ref(false)
const targetNumber = ref(Math.floor(Math.random() * 50) + 1);
const guess = ref('');
const message = ref('');
const attemptsLeft = ref(5);

const submitGuess = () => {
  const userGuess = parseInt(guess.value, 10);
  if (isNaN(userGuess) || userGuess < 1 || userGuess > 50) {
    message.value = '请输入一个有效的数字(1-50)';
    return;
  }
  // 你好
  // 你好
  // 你好
  // 你好
  if (userGuess === targetNumber.value) {
    message.value = '猜对了！';
  } else if (userGuess < targetNumber.value) {
    message.value = '太小了';
  } else {
    message.value = '太大了';
  }
  attemptsLeft.value--;
  if (attemptsLeft.value === 0 && message.value !== '猜对了！') {
    message.value = `游戏结束！正确答案是 ${targetNumber.value}`;
  }
  guess.value = '';
};

const resetGame = () => {
  targetNumber.value = Math.floor(Math.random() * 50) + 1;
  guess.value = '';
  message.value = '';
  attemptsLeft.value = 5;
};

function aa() {
  document.body.style.width = "100vw"
  document.body.style.height = "100vh"
}
</script>

<style scoped>
.game-container {
  z-index: -1;
  width: 400px;
  height: 230px;
  text-align: center;
  padding: 10px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: absolute;
  border: #ccc 1px solid;
  /* background-image: url();
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30px; */
}

.game-container>h1 {
  color: rgb(0, 255, 238);
}

input {
  margin: 10px;
  padding: 5px;
  width: 200px;
}

button {
  padding: 5px 10px;
}

/* jg */
.jg {
  display: flex;
  justify-content: center;
  align-items: center;
}

.jg span {
  border: none;
  background-color: #ccc;
  font-size: 12px;
}

.caishu {
  position: absolute;
  left: 115px;
}

.caishu>span {
  width: 50px;
  margin-top: 10px;
}

span {
  display: inline-block;
  width: 200px;
  height: 20px;
  line-height: 20px;
  background-color: #ccc;

}

.dw {
  position: absolute;
  transform: translate(-50%, 0%);
  top: 130%;
  left: 48%;
}

.zhong {
  position: absolute;
  color: #ccc;
  border-radius: 50%;
  border: none;
  right: 30px;
  top: 20px;
}

.gz {
  font-size: 12px;
  position: absolute;
  list-style: none;
  transform: translate(-50%, 0%);
  top: 0%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 90vw;
  height: 90vh;
}

.gz>div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  padding: 10px;
  padding-bottom: 55px;
  position: relative;
  background-color: #ccc;

}

.gz>div>div {

  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.gz button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 10px;
  border: none;
  color: #1c7cc5;
}
</style>
